/**
 * Copyright (C) 2010-2025 Structr GmbH
 *
 * This file is part of Structr <http://structr.org>.
 *
 * Structr is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as
 * published by the Free Software Foundation, either version 3 of the
 * License, or (at your option) any later version.
 *
 * Structr is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with Structr.  If not, see <http://www.gnu.org/licenses/>.
 */
@charset "UTF-8";

.large {
	width: 600px;
	height: 300px;
}

.medium {
	width: 200px;
	height: 100px;
}

.small {
	width: 150px;
	height: 75px;
}

.tiny {
	width: 50px;
	height: 25px;
}

.dot {
	width: 10px;
	height: 10px;
}

#graph-canvas .node {
	position: absolute;
	background-color: var(--medium-light-gray-e0);
}

#graph-canvas .node:hover {
	background-color: var(--gray-eee);
}

.node .head h2 {
	float: left;
	margin-left: 12px;
}

.node .head input.save {
}

.node .head input.hidden {
	visibility: hidden;
}

.large .head h2 {
	font-size: 11pt;
}

.medium .head h2 {
	font-size: 10pt;
}

.small .head h2 {
	font-size: 9pt;
}

.tiny .head h2 {
	font-size: 7pt;
	margin: 4px;
}

.dot .head h2 {
	font-size: 5pt;
}

.node .body {
	margin: 12px;
	float: left;
	overflow: auto;
}

.large .body {
	width: 576px;
	height: 300px;
}

.medium .body {
	width: 176px;
	height: 100px;
}

.small .body, .tiny .body, .dot .body {
	width: 0px;
	height: 0px;
}

.medium .body table.props {
	font-size: 0.8em;
	width: 176px;
}

.large .body table.props {
	width: 576px;
}

.node .body table.props {
	border: 1px solid var(--gray-ccc);
	border-collapse: collapse;
	float: left;
}

.node .body table.props th {
	background-color: var(--medium-light-gray-e0);
	border: 1px solid var(--medium-light-gray-c0);
	padding: 2px;
}

.node .body table.props td {
	background-color: var(--solid-white);
	border: 1px solid var(--medium-light-gray-c0);
	padding: 2px 4px;
}

.node .foot {
	margin: 12px;
	float: left;
}

.body table.props tr td.value {
	padding: 4px 4px 4px 5px;
	margin: 0;
}

.body table.props tr td.value input {
	margin: -3px;
	border: none;
	font-size: inherit;
}

.body table.props tr td.value textarea {
	margin: -3px;
	border: none;
	font-size: inherit;
}

.body table.props tr td.value input.active {
	margin: -3px;
}

.body table.props tr td.value .tick {
	border: none;
	position: absolute;
}

#settings {
	margin: 12px 30px;
}

#settings input {
	text-align: right;
}

#settings table {
	width: 100%;
}

#settings td:nth-child(evenss) {
	text-align: right;
}

ul.relBox, ul.nodeBox {
	width: 100%;
	padding: 0;
	margin: 0;
}

ul.relBox li, ul.nodeBox li {
	width: 100%;
	list-style-type: none;
	padding: 0;
	margin: 0 0 6px 0;
}

.query-box {
	/*vertical-align: top;*/
}

#function-bar .query-box .icon {
	color: var(--icon-stroke);
	top: 0;
	margin: .375rem 0 0 .5rem;
}

.query-box i.clearSearchIcon {
	right: .5rem;
}

.saved-query {
	padding: .5em;
	border: 1px solid var(--gray-ccc);
	background: var(--solid-white);
	position: relative;
	margin-bottom: 12px;
}

.saved-query:hover {
	border: 1px solid var(--gray-ddd);
	background: var(--light-gray-bg-f7);
	cursor: pointer;
}

.saved-query i {
	vertical-align: middle;
	margin: 0 4px 0 0;
}

.saved-query .remove-query {
	position: absolute;
	top: 6px;
	right: 6px;
	display: none;
}

.saved-query:hover .remove-query {
	display: block;
}

#saved-queries {
	overflow: auto;
}

#cypher-params {
	position: relative;
}

#add-cypher-parameter {
	position: absolute;
	right: .5em;
	bottom: .5em;
	cursor: pointer;
}

.remove-cypher-parameter {
	margin-bottom: 4px;
	vertical-align: middle;
	cursor: pointer;
}

#graph-canvas {
	/*background-color: var(--light-gray-bg-f3);*/
	width: calc(100vw - 1rem);
	height: calc(100vh - 8rem);
}

#graph-canvas .node {
	padding: 2px 6px;
	margin: 4px 0 4px 0;
	border: 1px solid var(--black-opacity-125);
}


#fruchterman-controlElement {
	float: none ! important;
	display: block;
}

#graphDisplayTab {
	margin: 8px 8px 0 30px;
}

#graph-info {
	top: 0;
	text-align: center;
	height: 24px;
	position: relative;
}

#graph-info .circle {
	display: inline-block;
	margin-right: 4px;
	border-radius: 50%;
	width: 16px;
	height: 16px;
	vertical-align: middle;
	/*border: 1px solid var(--link-color-active);*/
	/* width and height can be anything, as long as they're equal */
}

.nodeExpander-infobutton {
	/*color: white ! important;*/
	margin: 4px;
	display: inline-block;
	border: none;
}

.nodeExpander-expandbutton {
	-webkit-border-radius: 40px;
	-moz-border-radius: 40px;
	border-radius: 40px;
	min-width: 30px;
	min-height: 30px;
	text-align: center;
	/*font-size: 9pt;*/
	color: white ! important;
}

#graphSelectionTools {
	margin-top: 15pt;
}

#selectionToolsTableContainer {
	max-height: 300pt;
	overflow-y: auto;
}

#forceAtlas-controlElement.active::before {
	content: '✓ ';
	color: var(--structr-green);
}